<template>
    <div>
        <div style="width: 200px; float: left">
            <Menu theme="light" width="180px" :active-name="catalogId" @on-select="selectCatelog">
                <template v-for="catalog in catalogData">
                    <MenuItem :name="catalog.bId">{{catalog.name}}</MenuItem>
                </template>
            </Menu>
        </div>
        <article-list v-bind:catalogId="catalogId"></article-list>
    </div>
</template>

<script>

    import ArticleList from "./ArticleList"

    export default {
        name: "ArticleManage",
        components: {ArticleList},
        data() {
            return {
                catalogData: [],
                catalogId: "",
                articleCatalogName: ""
            }
        },
        methods: {
            listCatalog() {
                this.$http({
                    method: 'post',
                    url: this.apiBase + '/blog/catalog/list',
                    data: {}
                })
                    .then(response => {
                        this.catalogData = response.data.data.catalogs;
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            selectCatelog(name) {
                this.catalogId = name;
            }
        },
        created() {
            this.listCatalog();
        }
    }
</script>

<style scoped>

</style>